<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <style type="text/css">
        * {
            font-family: Verdana;
            font-size: 96%;
        }

        label {
            width: 10em;
            float: left;
        }

        label.error {
            float: none;
            color: red;
            padding-left: .5em;
            vertical-align: top;
        }

        fieldset {
            padding: 0px 0px;
            margin: 0px 0px;
        }

        p {
            clear: both;
        }

        .submit {
            margin-left: 12em;
        }

        em {
            font-weight: bold;
            padding-right: 1em;
            vertical-align: top;
        }

        .ui-tabs {
            font-size: 1.0em;
        }
    </style>

    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #sortable li {
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            width: 100px;
            height: 90px;
            font-size: 4em;
            text-align: center;
        }

        #feedback {
            font-size: 1.4em;
        }

        #selectable .ui-selecting {
            background: #FECA40;
        }

        #selectable .ui-selected {
            background: #F39814;
            color: white;
        }

        #selectable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #selectable li {
            margin: 3px;
            padding: 1px;
            float: left;
            width: 100px;
            height: 80px;
            font-size: 4em;
            text-align: center;
        }

        .removed {
            background-color:rgba(255,0,0,0.5);
        }

    </style>
    <script type="text/javascript">
        function goToUserPage(e) {
            parent.closeIframe(true,e.href);
        }

        function removeFromLikes(idUser){
            if (confirm('Вы уверены?')) {
                //TODO
                $.getJSON('/likes/delete',{user:${systemUser.idUser},likeToDelete:idUser},function(data) {
                    if (data.isOk) {
                       $("#"+idUser).addClass("removed");
                       $("#"+idUser).children(":last-child").attr("disabled","disabled");
                    }
                })
            }

        }
    </script>
</head>
<body>
    <c:choose>
    <c:when test="${not empty likes}">
<table cellspacing="15">
    <c:forEach items="${likes}" var="su">
        <tr id="${su.idUser}">
            <td>
                <img src="/users/${su.idUser}/getImage" width="48" height="48" />
            </td>
            <td>
                <a href="<c:url value="/users/${su.idUser}" />" onclick="goToUserPage(this)">${su.firstName} ${su.lastName}</a><br/>
                <c:out value="${su.city.ruName}"/><br/>
                <c:out value="${su.email}"/>
            </td>
            <security:authentication property="name" var="username"/>
            <c:if test="${username == systemUser.email }">
                <td>
                    <input type="button" value="Удалить из списка" onclick="removeFromLikes(${su.idUser})">
                </td>
            </c:if>
        </tr>
    </c:forEach>
</table>
</c:when>
<c:otherwise>
Данный список пока пуст...
</c:otherwise>
</c:choose>

</body>
</html>